<!-- 首页 -->
<template>
	<view class="home-wrap u-m-b-20" style="background: linear-gradient(0deg, #EEEFF1, #FFFFFF);">
		<!-- 空白页 -->
		<!-- #ifdef APP-PLUS -->
		<u-no-network @retry="init"></u-no-network>
		<!-- #endif -->
		<shopro-empty v-if="!hasTemplate" :image="$IMG_URL + '/imgs/empty/template_empty.png'"
			tipText="暂未找到模板，请前往装修~"></shopro-empty>

		<view v-else-if="isConnected && isRefresh" class="content-box">
			<!-- 导航栏 -->
			<home-head v-if="headSwiperList && headSwiperList.length || 1" :scrollTop="scrollTop" borderRadius="0"
				:navTitle="initShop.name" :list="headSwiperList"></home-head>
			<view
				style="margin: 0;padding: 25rpx;position: absolute;top: 0;height: 482rpx;width: 100vw;background-size: 100% 100%;"
				:style="'background-image: url('+BASE_URL+'/uploads/20231014/1c4dda223fdcc0061793fcc7efc1e8f8.png);'">
			</view>
			<!-- 自定义模块 -->
			<view class="template-box" style="position: relative;z-index: 1;">
				<block v-for="(item, index) in homeTemplate" :key="item.id">
					<view class="store" v-if="index == 1">
						<view class="store_con">
							<view class="" style="display: flex;justify-content: space-between;align-items: center;">
								<view class="logo_right" style="display: flex;width: 80%;margin-top: 4rpx;">
									<view class="">
										<view class="logo_title x-f">
											{{storeInfo.name || ''}}
											<view @click="qiehuan()" class="qiehuan"
												style="display: flex;align-items: center;justify-content: center;">
												<image src="../../static/imgs/qiehuan.png" mode="widthFix"
													style="width: 28rpx;height: 28rpx;margin-left: 22rpx;margin-right: 8rpx;">
												</image>
												切换门店
											</view>
										</view>
										<view class="x-f">
											<view class="logo_desc"
												style="display: flex;align-items: center;justify-content: center;">
												<image src="../../static/imgs/x.png" mode="widthFix"
													style="width: 26rpx;height: 26rpx;margin-right: 8rpx;"></image>
												{{ storeInfo.pf || '4.9' }}
											</view>
											<view class="xyl">
												洗衣量：{{ storeInfo.xyl || '65' }}
											</view>
										</view>
										<view class="x-f" style="margin-top: 22rpx;">
											<view style="display: flex;align-items: center;justify-content: center;
												font-size: 24rpx;font-family: Source Han Sans CN;font-weight: 400;color: #888888;">
												<image src="../../static/imgs/openhours.png"
													style="width: 24rpx;height: 24rpx;margin-right: 8rpx;"></image>
												营业时间：{{ storeInfo.openhours || '' }}
											</view>
										</view>
										<view class="x-f" style="margin-top: 22rpx;" @tap="openStoreMap">
											<view style="display: flex;align-items: center;justify-content: center;
												font-size: 24rpx;font-family: Source Han Sans CN;font-weight: 400;color: #888888;">
												<image src="../../static/imgs/address.png"
													style="width: 24rpx;height: 24rpx;margin-right: 8rpx;"></image>
												店铺地址：{{storeInfo.province_name+storeInfo.city_name+storeInfo.area_name+storeInfo.address ? storeInfo.province_name+storeInfo.city_name+storeInfo.area_name+storeInfo.address : ''}}
											</view>
										</view>
									</view>
								</view>
								<view @click="jump('/pages/store/store', { id: storeInfo.id })">
									<image class="logo_div" :src="storeInfo.image_first" mode="widthFix"></image>
								</view>
							</view>
							<!-- <view class="line">
							</view>
							<view class="" style="padding: 30rpx;">
								<view class=""
									style="display: flex;justify-content: space-between;align-items: center;">
									<view class="" style="width: 90%;">
										<view class="call" @click="callPhone(storeInfo.phone)">
											<image src="../../static/imgs/call2.png" mode="widthFix"
												style="width: 24rpx;height: 24rpx;margin-right: 20rpx;"></image>
											{{storeInfo.phone.substr(0, 3) + '****' + storeInfo.phone.substr(7)  || ''}}
										</view>
										<view @tap="openStoreMap" class="gps" style="margin-top: 10rpx;">
											<image src="../../static/imgs/gps2.png" mode="widthFix"
												style="width: 28rpx;margin-right: 20rpx;height: 28rpx;"></image>
											<view class="store_add">
												{{storeInfo.province_name+storeInfo.city_name+storeInfo.area_name+storeInfo.address ? storeInfo.province_name+storeInfo.city_name+storeInfo.area_name+storeInfo.address : ''}}
											</view>
										</view>
									</view>
									<image @tap="openStoreMap" src="../../static/imgs/gps.png" mode="widthFix"
										style="width: 24rpx;position: relative;top: 20rpx;height: 24rpx;">
									</image>
								</view>
							</view> -->
						</view>
					</view>
					<!-- 轮播 -->
					<sh-banner v-if="item.type === 'banner' && index !== 0" :Px="item.content.x" :Py="item.content.y"
						:borderRadius="item.content.radius" :height="item.content.height"
						:list="item.content.list"></sh-banner>

					<!-- 搜索 -->
					<sh-search v-if="item.type === 'search'"></sh-search>

					<!-- 滑动宫格 -->
					<view class="" v-if="item.type === 'menu'">
						<sh-grid-swiper :list="item.content.list" :oneRowNum="item.content.style"></sh-grid-swiper>
						<view class="x-f"
							style="justify-content: space-between;padding: 0 26rpx;margin-top: -16rpx;margin-bottom: 10rpx;"
							v-if="initShop.jgq.length">
							<image :src="val.image" mode="widthFix"
								style="width: 218rpx;height: 96rpx;border-radius: 5rpx;" v-for="val in initShop.jgq"
								@click="jump(val.path)">
							</image>
						</view>
					</view>
					<!-- 推荐商品 -->
					<sh-hot-goods v-if="item.type === 'goods-list' || item.type === 'goods-group'"
						:detail="item.content"></sh-hot-goods>
					<!-- 广告魔方 -->
					<sh-adv v-if="item.type === 'adv'" :detail="item.content"></sh-adv>
					<!-- 优惠券 -->
					<sh-coupon v-if="item.type === 'coupons'" :detail="item.content"></sh-coupon>
					<!-- 秒杀-->
					<sh-seckill v-if="item.type === 'seckill'" :detail="item.content"></sh-seckill>
					<!-- 拼团 -->
					<sh-groupon v-if="item.type === 'groupon'" :detail="item.content"></sh-groupon>
					<!-- 富文本 -->
					<sh-richtext v-if="item.type === 'rich-text'" :richId="item.content.id"></sh-richtext>
					<!-- 功能标题 -->
					<sh-title-card v-if="item.type === 'title-block'" :title="item.content.name"
						:bgImage="item.content.image" :titleColor="item.content.color"></sh-title-card>
					<!-- 直播 -->
					<!-- #ifdef MP-WEIXIN -->
					<sh-live v-if="item.type === 'live' && HAS_LIVE" :detail="item.content"></sh-live>
					<!-- #endif -->
				</block>
			</view>

			<!-- 分类选项卡 -->
			<sh-category-tabs
				v-if="categoryTabsData && categoryTabsData.category_arr && categoryTabsData.category_arr.length"
				:enable="enable" :styleType="categoryTabsData.style"
				:tabsList="categoryTabsData.category_arr"></sh-category-tabs>
			<!-- 登录提示 -->
			<shopro-auth-modal></shopro-auth-modal>
			<!-- 悬浮按钮 -->
			<shopro-float-btn></shopro-float-btn>
			<!-- 连续弹窗提醒 -->
			<shopro-notice-modal v-if="!showPrivacy && isLogin"></shopro-notice-modal>
			<!-- 隐私协议 -->
			<!-- #ifdef APP-PLUS -->
			<privacy-modal v-if="initShop && initShop.name" v-model="showPrivacy"></privacy-modal>
			<!-- #endif -->
			<!-- #ifdef H5 -->
			<view class="tabbar-hack" style="height: 120rpx; width:100%;"></view>
			<!-- #endif -->
		</view>
		<shopro-tabbar></shopro-tabbar>
	</view>
</template>

<script>
	import shBanner from './components/sh-banner.vue';
	import shGridSwiper from './components/sh-grid-swiper.vue';
	import shHotGoods from './components/sh-hot-goods.vue';
	import shAdv from './components/sh-adv.vue';
	import shCoupon from './components/sh-coupon.vue';
	import shSeckill from './components/sh-seckill.vue';
	import shGroupon from './components/sh-groupon.vue';
	import shRichtext from './components/sh-richtext.vue';
	import shTitleCard from './components/sh-title-card.vue';
	import shSearch from './components/sh-search.vue';
	import shCategoryTabs from './components/sh-category-tabs.vue';

	import privacyModal from './index/privacy-modal.vue';
	import homeHead from './index/home-head.vue';

	import {
		HAS_LIVE,
		BASE_URL
	} from '@/env';
	// #ifdef MP-WEIXIN
	import shLive from './components/sh-live.vue';
	// #endif

	import {
		mapMutations,
		mapActions,
		mapState,
		mapGetters
	} from 'vuex';
	export default {
		components: {
			shBanner,
			shGridSwiper,
			shGroupon,
			shHotGoods,
			shAdv,
			shCoupon,
			shSeckill,
			shRichtext,
			shTitleCard,
			shSearch,
			shCategoryTabs,

			privacyModal,
			homeHead,

			// #ifdef MP-WEIXIN
			shLive
			// #endif
		},
		data() {
			return {
				BASE_URL: BASE_URL,
				HAS_LIVE: HAS_LIVE,
				// #ifdef MP-WEIXIN
				// #endif
				isRefresh: true,
				storeInfo: {},
				enable: false, //是否开启吸顶。
				isConnected: true, //是否有网
				showPrivacy: false, //协议
				scrollTop: 0
			};
		},
		computed: {
			...mapGetters(['initShop', 'homeTemplate', 'hasTemplate', 'isLogin']),
			// 头部模块数据
			headSwiperList() {
				if (this.homeTemplate?.length) {
					return this.homeTemplate[0]?.content?.list;
				}
			},
			// 分类选项卡数据
			categoryTabsData() {
				if (this.homeTemplate?.length) {
					return this.homeTemplate[this.homeTemplate.length - 1]?.content;
				}
			}
		},
		onPullDownRefresh() {
			this.init();
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onShareAppMessage(res) {
			var pathUrl = '/pages/index/index?store_id=' + this.storeInfo.id;
			return {
				title: this.storeInfo.name + this.storeInfo.id,
				path: pathUrl
			}
		},
		onShareTimeline(res) {
			var pathUrl = '/pages/index/index?store_id=' + this.storeInfo.id;
			return {
				title: this.storeInfo.name + this.storeInfo.id,
				path: pathUrl
			}
		},
		onShow() {
			let that = this;
			this.enable = true;
			this.isLogin && this.getCartList();
			// 网络变化检测
			uni.onNetworkStatusChange(res => {
				this.isConnected = res.isConnected;
				res.isConnected && this.init();
			});

			uni.getLocation({
				type: 'wgs84',
				success: function(res) {
					console.log('当前位置的经度：' + res.longitude);
					console.log('当前位置的纬度：' + res.latitude);
					uni.setStorageSync('longitude', res.longitude); //设置缓存
					uni.setStorageSync('latitude', res.latitude); //设置缓存
					setTimeout(() => {
						that.getStore(true);
					}, 100);
					that.latitude = res.latitude;
					that.longitude = res.longitude;
				}
			});
		},
		onHide() {
			this.enable = false;
		},
		onLoad() {
			let that = this;
			that.getStore();
			if (this.$Route.query.store_id) {
				console.log(222)
				uni.setStorageSync('now_store_id', this.$Route.query.store_id); //设置缓存
			}
			// #ifdef APP-VUE
			// plus.runtime.disagreePrivacy();
			console.log(plus.runtime.isAgreePrivacy(), 1111111111);
			// app隐私协议弹窗
			if (!plus.runtime.isAgreePrivacy()) {
				this.showPrivacy = true;
				this.showNoticeModal = false;
			}
			// #endif

			that.$http('store.lists', {
				current_page: 1,
				order: 'desc',
			}).then(res => {
				if (res.code === 1) {
					that.List = res.data.data;
					console.log("that.List")
					console.log(that.List)
				}
				if (res.code == 0) {
					that.$tools.toast(res.msg);
				}
			});
		},
		methods: {
			// 打电话
			callPhone(phoneNumber = '') {
				let num = phoneNumber.toString()
				uni.makePhoneCall({
					phoneNumber: num,
					fail(err) {
						console.log('makePhoneCall出错', err)
					},
				});
			},
			qiehuan(value = '') {
				this.jump('/pages/order/business-address', {
					goodsId: -1,
					lat: this.latitude,
					lng: this.longitude,
					storeId: this.storeInfo.id
				})
			},
			// 路由跳转
			jump(path, parmas) {
				this.$Router.push({
					path: path,
					query: parmas
				});
			},
			// 打开地图
			openStoreMap() {
				uni.openLocation({
					latitude: +this.storeInfo.latitude,
					longitude: +this.storeInfo.longitude,
					name: this.storeInfo.province_name + this.storeInfo.city_name + this.storeInfo.area_name,
					address: this.storeInfo.address,
					success: function() {
						console.log('success');
					},
					fail: err => {
						console.log(err);
					}
				});
			},
			getStore(is_set = false) {
				let that = this;
				console.log("getStore")
				console.log(this.$Route.query.store_id)
				that.$http('commonIndex.getStore').then(res => {
					if (res.code === 1) {
						that.storeInfo = res.data.store;
						console.log("res")
						console.log(res)
						if (res.data.store.id && is_set) {
							uni.setStorageSync('now_store_id', res.data.store.id); //设置缓存
							console.log("设置缓存")
							console.log(uni.getStorageSync('now_store_id'))
							uni.setStorageSync('now_store', res.data.store); //设置缓存
						}
					}
				});
			},
			...mapActions(['appInit', 'getTemplate', 'getCartList']),
			// 初始化
			init() {
				this.isRefresh = false;
				return Promise.all([this.getTemplate()]).then(() => {
					uni.stopPullDownRefresh();
					this.isRefresh = true;
				});
			}
		}
	};
</script>

<style lang="scss">
	.code1 {
		font-size: 24rpx;
		font-weight: 400;
		color: #CCCCCC;
		opacity: 1;
	}

	.store {
		// height: 270rpx;
		// width: 690rpx;
		padding: 0rpx 25rpx;

		.store_con {
			margin: 0 auto;
			// background: #FFFFFF;
			// height: 270rpx;
			border-radius: 16px;
		}

		.line {
			width: 100%;
			height: 2rpx;
			background: #F8F8F8;
		}

		.call {
			font-size: 26rpx;
			font-weight: 400;
			color: #222222;
			opacity: 1;
			display: flex;
			align-items: center;
		}

		.gps {
			font-size: 24rpx;
			font-weight: 400;
			color: #222222;
			opacity: 1;
			display: flex;
			align-items: center;

		}

		.store_add {
			display: inline;
			overflow: hidden;
			/*超出部分隐藏*/

			text-overflow: ellipsis;
			/* 超出部分显示省略号 */

			white-space: nowrap;
			/*规定段落中的文本不进行换行 */
		}

		.logo_div {
			width: 120rpx;
			height: 120rpx;
			// background: #FFFFFF;
			// box-shadow: 0rpx 0rpx 20rpx rgba(0, 0, 0, 0.05);
			border-radius: 50%;
			position: relative;
		}

		.logo_right {}

		.logo_title {
			font-size: 32rpx;
			font-weight: 600;
			color: #040000;
			margin-bottom: 18rpx;

			height: 34rpx;
			font-size: 34rpx;
			font-family: Source Han Sans CN;
			font-weight: bold;
			color: #333333;
		}

		.logo_desc {
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FEB222;
		}

		.xyl {
			font-size: 22rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #888888;
			margin-left: 22rpx;
		}

		.qiehuan {
			text-align: center;

			color: #666666;
			font-size: 24rpx;
			font-weight: 400;

			font-size: 22rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #0099E5;
		}
	}

	// 标题搜索栏
	.active {
		// 动画时间跟随轮播组件动画时间
		transition: all linear 0.5s;
	}

	// 服务协议
	.modal-wrap {
		/deep/ .cu-modal {
			z-index: 99999;
		}
	}

	.service-contract-wrap {
		background-color: #fff;
		position: relative;
		left: 50%;
		transform: translateX(-50%);
		width: 610rpx;
		min-height: 850rpx;
		border-radius: 20rpx;

		.service-title {
			font-size: 35rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: rgba(255, 255, 255, 1);
			line-height: 42rpx;
			background: linear-gradient(180deg, rgba(62, 48, 25, 1) 0%, rgba(109, 80, 40, 1) 100%);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			margin-bottom: 30rpx;
		}

		.service-content {
			text-align: left;
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: rgba(102, 102, 102, 1);
			line-height: 50rpx;
			padding: 0 40rpx;
		}

		.service-tip {
			text-align: left;
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: rgba(154, 154, 154, 1);
			line-height: 50rpx;
			padding: 0 40rpx;
		}

		.btn-box {
			padding: 40rpx;

			.cancel-btn {
				width: 248rpx;
				height: 70rpx;
				border: 1rpx solid rgba(234, 182, 99, 1);
				border-radius: 35rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: rgba(234, 182, 99, 1);
				background-color: #fff;
			}

			.agree-btn {
				width: 300rpx;
				height: 70rpx;
				background: linear-gradient(90deg, #0099E5, #0099E5);
				border-radius: 35rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: rgba(255, 255, 255, 1);
			}
		}

		.ic-hide {
			position: absolute;
			font-size: 50rpx;
			bottom: -100rpx;
			z-index: 11;
			color: #fff;
			left: 50%;
			transform: translateX(-50%);
		}
	}

	.head_box {
		width: 750rpx;
		// background: #fff;
		transition: all linear 0.3s;

		/deep/.cuIcon-back {
			display: none;
		}

		.nav-title {
			font-size: 38rpx;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 36rpx;
			font-weight: 600;
			color: #fff;
			color: #040000;
		}

		.cu-custom .cu-bar {
			padding-right: 0 !important;
			justify-content: center;
		}

		.page_box {
			background: #F8F8F8;
		}
	}
</style>